<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="/static/css/style.css" />
    <style type="text/css">
      .login_form {
        height: 420px;
        margin-top: 25px;
      }
    </style>
    <script src="/static/script/jquery-1.7.2.js"></script>
    <script>
      $(function () {
        //给注册按钮绑定单击事件
        $("#sub_btn").click(function () {
          //获取用户输入的用户名
          var username = $("#phone").val();
          //设置验证用户名的正则表达式
          var usernameReg = /^[a-zA-Z0-9_-]{3,16}$/;
          //验证是否符合规则
          var flag = usernameReg.test(username);
          if (!flag) {
            /* alert("请输入3-16位的字母、数字、下划线或减号的用户名！"); */
            alert("请输入11位手机号");
            return false;
          }
          //获取用户输入的密码
          var password = $("#password").val();
          //设置验证密码的正则表达式
          var passwordReg = /^[a-zA-Z0-9_-]{6,18}$/;
          if (!passwordReg.test(password)) {
            alert("请输入6-18位的字母、数字、下划线或减号的密码！");
            return false;
          }
          //获取用户输入的确认密码
          var repwd = $("#repwd").val();
          if (repwd == "") {
            alert("确认密码不能为空！");
            return false;
          }
          //判断两次输入的密码是否一致
          if (repwd != password) {
            //将确认密码清空，即将确认密码密码框中的value属性设置为空
            $("#repwd").val("");
            alert("两次输入的密码不一致！");
            return false;
          }
        });
        $("#msg").hide();
        if ("{{.}}" == "用户名已存在") {
          $("#msg").show();
        }
        // 发送Ajax请求验证用户名是否存在
        // 给输入用户名的文本绑定change事件
        $("#phone").change(function () {
          var phone = $(this).val(); // 获取用户输入的用户名
          var url = "/checkUserName"; // 设置请求的url地址
          var param = { phone: phone }; // 设置请求参数
          // 发送Ajax请求
          $.post(url, param, function (res) {
            $("#msg").show(); // 将显示提示信息的span元素显示出来
            $("#msg").html(res); // 将响应信息设置到span元素中
          });
        });
      });
    </script>
  </head>
  <body>
    <div id="login_header">
      <img class="logo_img" alt="" src="/static/img/logo.gif" />
    </div>

    <div class="login_banner">
      <div id="l_content">
        <span class="login_word">欢迎注册</span>
      </div>

      <div id="content">
        <div class="login_form">
          <div class="login_box">
            <div class="tit">
              <h1>注册会员</h1>
              <span class="errorMsg" id="msg">{{.}}</span>
            </div>
            <br />
            <div class="form">
              <form action="/regist" method="POST">
                <label>手机：</label>
                <input
                  class="itxt"
                  type="text"
                  placeholder="请输入手机号"
                  autocomplete="off"
                  tabindex="1"
                  name="phone"
                  id="phone"
                />
                <br />
                <br />
                <label>密码：</label>
                <input
                  class="itxt"
                  type="password"
                  placeholder="请输入密码"
                  autocomplete="off"
                  tabindex="1"
                  name="password"
                  id="password"
                />
                <br />
                <br />
                <label>确认密码：</label>
                <input
                  class="itxt"
                  type="password"
                  placeholder="确认密码"
                  autocomplete="off"
                  tabindex="1"
                  name="repwd"
                  id="repwd"
                />
                <br />
                <br />
                <br />
                <br />
                <input type="submit" value="注册" id="sub_btn" />
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <span> Copyright © 2007-2020 书文 版权所有 </span>
      <span> 京ICP备15025412号-2 京ICP备15025412-4号 </span>
      <span> 24小时客服电话微信15010729356 </span>
    </div>
  </body>
</html>
